<section id="o2oc-order-panel">
    <div class="container">
        <a ui-sref="o2o_c.orderlist"><h3><span class="glyphicon glyphicon-menu-left"></span> Back to Order List</h3></a>
        
        <!-- An order item template -->
        <div class="panel" ng-class="{'panel-danger':order.status==-1, 'panel-warning':order.status==0, 'panel-info':order.status==1, 'panel-primary':order.status==2, 'panel-success':order.status==3}">
        
            <div class="panel-heading">
                <h3 class="panel-title">{{order.merchant.name}} - {{order.createTime | date: 'yyyy-MM-dd HH:mm'}}</h3>
            </div>
            <div class="panel-body">
                <div ng-repeat="orderItem in order.orderItem">
                    
                    <div class="float-left">
                        <h3>{{orderItem.dishName}}<span>X{{orderItem.num}}</span></h3>
                    </div>
                    <div class="float-right">
                        <h5>Single: {{orderItem.unitPrice}}</h5>
                        <h4>Total: {{orderItem.unitPrice * orderItem.num}}</h4>
                    </div>

                    <div class="clear"></div>
                    
                    <hr ng-if="!$last">
                    
                </div>
   
                
                <hr class="no-margin-bottom">
                
                <div class="float-left">
                    <h3>Total:</h3>
                </div>
                <div class="float-right">
                    <h3>{{order.totalPrice}}</h3>
                </div>
                
                <div class="clear"></div>
                
                <div ng-if="order.comment">
                    <hr class="no-margin-top">
                    
                    <p>Comment: {{ order.comment.content }}</p>
                    <!-- <p style="color: green;" ng-if="true">Restaurant reply: ${order.commentVO.replyVO.content}</p> -->
                </div>
                
            </div>
            <div class="panel-footer">
                <div class="receiver-info">
                    <p>Receiver: {{order.realName}} <span>({{order.phone}})</span></p>
                    <p>Receive address: {{order.address}}</p>
                </div>
                <div class="order-operations">
                    <p>Status:
                        <span ng-if="order.status==-1">REJECTED</span>
                        <span ng-if="order.status==0">PENDING</span>
                        <span ng-if="order.status==1">ACCEPTED</span>
                        <span ng-if="order.status==2">DELIVERED</span>
                        <span ng-if="order.status==3">RECEIVED</span>
                    </p>
                    
                    <a role="button" class="btn btn-success" ng-if="order.status==2" ng-click="showModal('confirm')">Confirm</a>
                    <!-- <a role="button" tabindex="0" class="btn btn-warning show-complaint-modal-btn" ng-if="true" ng-click="showModal('complaint')">Complaint</a> -->
                    <a role="button" tabindex="0" class="btn btn-primary" ng-if="(order.status==-1||order.status==3)&&!order.comment" ng-click="showModal('comment')">Comment</a>
                    
                </div>
                <div class="clear"></div>
            </div>
        </div><!-- template end -->
        
        <!-- An order item template -->
<!--
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title">KFC - <span>2010-04-05 09:32</span></h3>
            </div>
            <div class="panel-body">
                <div class="panel-float-left">
                    <img src="https://www.baidu.com/img/bd_logo1.png">
                </div>
                <div class="panel-float-right">
                    <h3>Chips<span>X1</span></h3>
                    <p>Snack</p>
                    <h5>Single: 5.00</h5>
                    <h4>Total: 5.00</h4>
                </div>
                
                <div class="clear"></div><hr>
                
                <div class="panel-float-left">
                    <h3>Total:</h3>
                </div>
                <div class="panel-float-right">
                    <h3>20.00</h3>
                </div>
                
            </div>
            <div class="panel-footer">
                <div class="receiver-info">
                    <p>Receiver: Simon <span>(13800138000)</span></p>
                    <p>Receive address: No.3 Street</p>
                </div>
                <div class="order-operations">
                    <p>Status: Pending</p>
                    <button class="btn btn-success show-confirm-modal-btn">Confirm</button>
                </div>
                <div class="clear"></div>
            </div>
        </div> template end 
-->
    </div>
    
    <div id="comment-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Comment</h4>
                </div>
                <div class="modal-body">
                    <form id="comment-form">
                        <!-- <input type="hidden" name="oid" value="${order.id}">
                        <input type="hidden" name="mid" value="${order.merchantVO.id}"> -->

                        <p><textarea class="form-control" name="content" placeholder="Enter comment..." ng-model="commentText"></textarea></p>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" ng-click="sendComment()">Send</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    
    <div id="confirm-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Comfirm?</h4>
                </div>
                <div class="modal-body">
                    <p>Please confirm your dishes has already been received before you click confirm button below.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success" ng-click="confirmOrder()">Yes. I have received my dish</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</section>